import { ElMessage } from "element-plus";
import { createRouter, createWebHashHistory } from "vue-router";
import { isLogged, getLoggedUser } from "../utils/stateUtils";

const routes = [
  {
    path: "/",
    name: "home",
    redirect: "/index",
    component: () => import("@/views/home.vue"),
    children: [
      {
        path: "login",
        name: "login",
        component: () => import("@/views/home/login.vue"),
      },
      {
        path: "register",
        name: "register",
        component: () => import("@/views/home/register.vue"),
      },
      {
        path: "index",
        name: "index",
        component: () => import("@/views/home/index.vue"),
      },
      {
        path: "post-detail",
        name: "post-detail",
        component: () => import("@/views/home/post-detail.vue"),
      },
      {
        path: "user-detail",
        name: "user-detail",
        component: () => import("@/views/home/user-detail.vue"),
      },
      {
        path: "user-center",
        name: "user-center",
        meta: {
          requireauth: true,
        },
        component: () => import("@/views/home/user-center.vue"),
      },
      {
        path: "publish",
        name: "publish",
        meta: {
          requireauth: true,
        },
        component: () => import("@/views/home/publish.vue"),
      },
      {
        path: "chat",
        name: "chat",
        meta: {
          requireauth: true,
        },
        component: () => import("@/views/home/chat.vue"),
      },
      {
        path: "score-rank",
        name: "score-rank",
        meta: {
          requireauth: true,
        },
        component: () => import("@/views/home/score-rank.vue"),
      },
    ],
  },
  {
    path: "/admin",
    name: "admin",
    meta: {
      requireauth: true,
      role: "ADMIN",
    },
    redirect: "/admin/dashboard",
    component: () => import("@/views/admin/home.vue"),
    children: [
      {
        path: "dashboard",
        name: "dashboard",
        component: () => import("@/views/admin/dashboard.vue"),
      },
      {
        path: "tag-manager",
        name: "tag-manager",
        component: () => import("@/views/admin/tag-manager.vue"),
      },
      {
        path: "post-manager",
        name: "post-manager",
        component: () => import("@/views/admin/post-manager.vue"),
      },
      {
        path: "user-manager",
        name: "user-manager",
        component: () => import("@/views/admin/user-manager.vue"),
      },
      {
        path: "system-manager",
        name: "system-manager",
        component: () => import("@/views/admin/system-manager.vue"),
      },
      {
        path: "about",
        name: "about",
        component: () => import("@/views/admin/about.vue"),
      },
    ],
  },
];

const router = createRouter({
  routes,
  history: createWebHashHistory(),
});

//  判断是否需要登录权限 以及是否登录
router.beforeEach((to, from, next) => {
  // 判断是否需要登录权限
  if (to.matched.some((res) => res.meta.requireauth)) {
    // 判断是否登录
    if (isLogged()) {
      // 判断是否需要特殊 角色
      const { role } = to.meta;
      // 如果不需要特殊 角色
      if (!role) {
        next();
      } else if (getLoggedUser().role === role) {
        // 如果需要特殊角色, 并且当前用户雀氏有这个角色
        next();
      } else {
        // 否则就说明 当前用户没有这个角色, 从哪里来就回哪里去
        ElMessage.error("您没有权限访问该页面");
        next(from);
      }
    } else {
      // 没登录则跳转到登录界面
      ElMessage.error("请先登录");
      next({
        path: "/login",
        query: { redirect: to.fullpath },
      });
    }
  } else {
    next();
  }
});

export default router;
